import SpecialZoomLevel from "../SpecialZoomLevel";
import { Plugin } from "../types/Plugin";
import { PdfJs } from "../interface";
import AnnotationLayerBody from "./AnnotationLayerBody";
import AnnotationLoader from "./AnnotationLoader";
import { FC, ReactElement, useRef } from "react";

interface AnnotationLayerProps {
  doc: PdfJs.PdfDocument;
  page: PdfJs.Page;
  pageIndex: number;
  plugins: Plugin[];
  rotation: number;
  scale: number;
  onExecuteNamedAction(action: string): void;
  onJumpToDest(
    pageIndex: number,
    bottomOffset: number,
    leftOffset: number,
    scaleTo: number | SpecialZoomLevel
  ): void;
}

const AnnotationLayer: FC<AnnotationLayerProps> = ({
  doc,
  page,
  pageIndex,
  plugins,
  rotation,
  scale,
  onExecuteNamedAction,
  onJumpToDest,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  const renderAnnotations = (annotations: PdfJs.Annotation[]): ReactElement => {
    return (
      <AnnotationLayerBody
        annotations={annotations}
        containerRef={containerRef}
        doc={doc}
        page={page}
        pageIndex={pageIndex}
        plugins={plugins}
        rotation={rotation}
        scale={scale}
        onExecuteNamedAction={onExecuteNamedAction}
        onJumpToDest={onJumpToDest}
      />
    );
  };

  return (
    <div ref={containerRef} className="rpv-core__annotation-layer">
      <AnnotationLoader page={page} renderAnnotations={renderAnnotations} />
    </div>
  );
};

export default AnnotationLayer;
